<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<view class="justify-center section_1" v-if="vuex_has_login"
					:style="{backgroundImage: 'url(' + user_center_bg +')'}">
					<image :src="vuex_user.avatar ? vuex_user.avatar : 'static/icon/default_thumb.svg'"
						class="image_1" />
					<view class="flex-col group_2">
						<text>会员：{{vuex_user.nickname}}</text>
						<text class="text_2" @click="logoutHandle">点击退出</text>
					</view>
				</view>
				<view class="justifyCenter section_1" v-else :style="{backgroundImage: 'url(' + user_center_bg +')'}">
					<view class="avator">
						<image src="/static/icon/default_thumb.svg" class="avatorImg" />
					</view>
					<view class="loginBtn" @click="isShowLogin()">点击登录</view>
				</view>

				<view class="section_2 flex-col">
					<view class="top-group justify-between items-center" @click="itemClick(1)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/dingdan.svg" class="image_2" />
							<text class="text_3">订单浏览</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="flex-col group_4">
						<view class="top-group justify-between items-center" @click="itemClick(7)">
							<view class="flex-row items-center">
								<image src="../../static/svgicon/kaquan.svg" class="image_2" />
								<text class="text_3">优惠券</text>
							</view>
							<view class="">
								<text v-if="vuex_has_login" class="font-14 pe-1"
									style="color: #747B7B;">{{vuex_user.unused_coupon_num ? vuex_user.unused_coupon_num : 0}}张</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view class="flex-col group_4">
						<view class="top-group justify-between items-center" @click="itemClick(6)">
							<view class="flex-row items-center">
								<image src="../../static/svgicon/wodeyue.svg" class="image_2" />
								<text class="text_3">余额</text>
							</view>
							<view class="">
								<text v-if="vuex_has_login" class="font-14 pe-1"
									style="color: #747B7B;">{{vuex_user.balance ? vuex_user.balance : 0 }}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="justify-between group_6 items-center" @click="itemClick(8)">
							<view class="flex-row items-center">
								<image src="../../static/svgicon/kaquan.svg" class="image_8" />
								<text class="text_6">会员卡券</text>
							</view>
							<view class="">
								<text v-if="vuex_has_login" class="font-14 pe-1"
									style="color: #747B7B;">{{vuex_user.card_num ? vuex_user.card_num : 0}}张</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="section_2 flex-col">
					<view class="justify-between items-center" @click="itemClick(2)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/chongzhi.svg" class="image_10" />
							<text class="text_7">充值</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="justify-between group_10 items-center" @click="itemClick(9)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/kaquan.svg" class="image_10" />
							<text class="text_8">买会员卡券</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="justify-between group_10 items-center" @click="itemClick(3)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/duihuan.svg" class="image_10" />
							<text class="text_8">大众美团兑券</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="section_2 flex-col">
					<view class="justify-between items-center" @click="itemClick(4)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/jibenxinxi.svg" class="image_10" />
							<text class="text_7">个人基本信息</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="justify-between group_10 items-center" @click="itemClick(11)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/credit.svg" class="image_10" />
							<text class="text_8">实名认证</text>
						</view>
						<view class="">
							<text v-if="vuex_has_login" class="font-14 pe-1"
								style="color: #747B7B;">{{Number(vuex_user.is_realname)?'已认证':'未认证'}}
							</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="justify-between group_10 items-center" @click="itemClick(12)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/verifyied.svg" class="image_10" />
							<text class="text_8">信用分</text>
						</view>
						<view class="">
							<text v-if="vuex_has_login" class="font-14 pe-1"
								style="color: #747B7B;">当前{{vuex_user.credit_score}}分</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="justify-between group_10 items-center" @click="itemClick(13)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/forget_thing.svg" class="image_10" />
							<text class="text_8">忘记物品自取</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="section_2 flex-col">
					<view class="justify-between items-center" @click="itemClick(14)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/clean.svg" class="image_10" />
							<text class="text_7">保洁开灯</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
			<!-- 		<view class="justify-between items-center" @click="itemClick(15)">
						<view class="flex-row items-center">
							<image src="../../static/svgicon/clean.svg" class="image_10" />
							<text class="text_7">test pay</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<popUp :show="show" @close="close" />
	</view>
</template>

<script>
	import config from '../../config.js';
	export default {
		data() {
			return {
				show: false,
				user_center_bg: config.baseUrl + '/assets/miniprogram/img/user_center_bg.png',
				userInfo: {}
			};
		},
		onLoad() {
			uni.hideShareMenu()
		},
		onShow() {
			this.getInfo()
		},
		watch: {
			vuex_token(news, odd) {
				if (news) {
					this.getInfo()
				}
			}
		},
		methods: {
			getInfo() {
				if (this.vuex_has_login) {
					this.$u.api.getUserInfo().then(res => {
						this.$u.vuex('vuex_user', {
							...this.vuex_user,
							...res.data
						})
					})
				}
			},

			itemClick(item) {
				if (!this.vuex_has_login && item != 0 && item != 5) {
					this.$u.toast('请先登录');
					return
				}
				switch (item) {
					case 0:
						this.$u.route({
							url: 'pages/myCenter/cooperation'
						});
						break;
					case 1:
						this.$u.route({
							url: 'pages/myCenter/reservation'
						});
						break;
					case 2:
						this.$u.route({
							url: 'pages/myCenter/balanceRecharge'
						});
						break;
					case 3:
						this.$u.route({
							url: 'pages/myCenter/exchangeVoucher'
							// url: 'pages/myCenter/myVoucher'
						});
						break;
					case 4:
						this.$u.route({
							url: 'pages/myCenter/baseInfo'
						});
						break;
					case 5:
						this.$u.route({
							url: 'pages/myCenter/commentMessage'
						});
						break;
					case 6:
						this.$u.route({
							url: 'pages/myCenter/balance'
						});
						break;
					case 7:
						this.$u.route({
							url: 'pages/myCenter/coupon'
						});
						break;
					case 8:
						this.$u.route({
							url: 'pages/myCenter/myVoucher'
						});
						break;
					case 9:
						this.$u.route({
							url: 'pages/members/membersVoucher'
						});
						break;
					case 10:
						this.$u.route({
							type: 'tab',
							url: 'pages/members/members'
						});
						break;
					case 11:
						if (Number(this.vuex_user.is_realname)) return
						this.$u.route({
							url: 'pages/myCenter/auth'
						});
						break;
					case 12:
						this.$u.route({
							url: 'pages/myCenter/scoreRecord'
						});
						break;
					case 13:
						this.$u.route({
							url: 'pages/myCenter/forgetThing'
						});
						break;
					case 14:
						this.$u.route({
							url: 'pages/myCenter/clean'
						});
						break;
					case 15:
						this.$u.route({
							url: 'pages/myCenter/testPay'
						});
						break;
				}
			},
			logoutHandle() {
				uni.showLoading({})
				this.$u.api.logout().then((res) => {
					if (res.code == 1) {
						this.vuex_logout()
						this.$u.toast('退出成功')
					} else {

						this.$u.toast('退出失败,请联系客服')
					}
				}).finally(() => {
					uni.hideLoading({})
				})
			},
			// 先尝试直接登录
			isShowLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.userLoginApi({
							code: res.code
						}).then(res => {
							if (res.code == 1) {
								this.vuex_login(res)
							} else {
								uni.hideTabBar()
								this.show = true
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})

			},
			//  关闭弹窗
			close() {
				this.show = false
				uni.showTabBar()
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(243, 243, 243);
		width: 100%;
		overflow-y: auto;
		height: 100%;

		.group {
			flex: 1 1 auto;
			overflow-y: auto;

			.group_1 {
				padding-bottom: 16rpx;

				.section_1 {
					padding: 84rpx 80rpx 112rpx;
					color: rgb(255, 255, 255);
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					white-space: nowrap;
					background-color: #ffffff;
					background-position: 0px 0px;
					background-size: 750rpx 336rpx;
					background-repeat: no-repeat;

					.image_1 {
						border-radius: 50%;
						width: 140rpx;
						height: 140rpx;
					}

					.group_2 {
						margin-left: 48rpx;
						width: 402rpx;

						.text_2 {
							margin-top: 40rpx;
						}
					}

					.avator {
						width: 140rpx;
						height: 140rpx;
						// background: rgba(226, 157, 182, 0.5);
						// border: 2rpx solid #D85886;
						// border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.avatorImg {
							width: 100%;
							height: 100%;
						}
					}

					.loginBtn {
						height: 56rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #FFFFFF;
						margin-left: 84rpx;
						border-bottom: 2px solid #FFFFFF;
						padding-bottom: 4rpx;
					}
				}

				.justifyCenter {
					display: flex;
					align-items: center;
				}

				.section_2 {
					margin-top: 16rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
					padding: 28rpx 32rpx;
					background-color: #ffffff;

					.group_4 {
						margin-top: 36rpx;

						.group_6 {
							margin-top: 36rpx;

							.image_9 {
								margin: 6rpx 8rpx 6rpx 0;
							}

							.image_8 {
								margin: 4rpx 0;
								width: 56rpx;
								height: 56rpx;
							}

							.text_6 {
								margin-left: 10rpx;
							}
						}
					}

					.group_10 {
						margin-top: 36rpx;

						.image_14 {
							margin: 6rpx 8rpx 6rpx 0;
						}

						.text_8 {
							margin-left: 10rpx;
						}
					}

					.image_16 {
						margin: 6rpx 8rpx 6rpx 0;
					}

					.top-group {
						padding: 0 4rpx;

						.right {
							margin: 6rpx 4rpx 6rpx 0;
						}

						.image_2 {
							width: 56rpx;
							height: 56rpx;
						}

						.text_3 {
							margin-left: 10rpx;
						}
					}

					.image_12 {
						margin: 6rpx 8rpx 6rpx 0;
					}

					.text_9 {
						margin-left: 10rpx;
					}

					.image_4 {
						width: 56rpx;
						height: 56rpx;
					}

					.text_7 {
						margin-left: 10rpx;
					}

					.image_10 {
						width: 56rpx;
						height: 56rpx;
					}

					.image_11 {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.section_3 {
				background-color: #ffffff;
				height: 398rpx;
			}
		}
	}
</style>